<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom常见获取方法</title>
</head>
<body>
<div id="mydiv">
	<p class="ps">这是一个 div 中 class="demo" 的 p 元素。</p>
	<p class="ps">这是一个 div 中 class="demo" 的 p 元素。</p>
	<p class="ps">这是一个 div 中 class="demo" 的 p 元素。</p>
</div>
<input type="text" name="text">
<input type="text" name="text">
<input type="text" name="text">
<div class="container"></div>
<button>按钮</button>
<button onclick="Myclick()">点击</button>
<script>
var Odiv = document.getElementById("mydiv");
console.log("通过ID查找" + Odiv);
let texts = document.getElementsByName("text");
console.log("通过标签的name值找到标签" + texts.length);
let divTwo = document.getElementsByClassName("container");
console.log("通过元素的class找到该元素" + divTwo);
let btn = document.getElementsByTagName("button");
console.log("通过标签名获取该元素" + btn);

Odiv.querySelector(".ps").style.backgroundColor = "red";
function Myclick() {
	/*Odiv.querySelector('.ps').innerHTML = "通过querySelector获取到父元素内的子元素;"*/
	Odiv.querySelector(".ps").innerHTML = "通过querySelector获取到父元素内的所有子元素;"
}

</script>
<!--
document对象: 表示整个文档
write() 向页面输出html或变量
getElementById(id)  通过id找到该元素
getElementsByName(name)   通过标签的name值找到标签,返回的是一个数组
getElementsByClassName(class) 通过元素的class找到该元素
querySelector() 从父元素对象返回一个css选择器元素的第一个子元素
querySelectorAll() 从父元素对象返回一个css选择器元素的所有子元素或任意一个,它返回的是一个数组

注意: 一般获取name方法时只有一个name时,可以不需要遍历,直接[0]下标获取即可
-->
</body>
</html>
